<template>
  <div class="left-menu-container">
    <el-menu :default-active="activeMenu" class="el-menu-vertical" :collapse="isCollapse" :collapse-transition="false"
      active-text-color="#ffd04b" background-color="#066981" text-color="#fff" :unique-opened="true" router>
      <!-- 折叠按钮 -->
      <div class="collapse-btn" @click="toggleCollapse">
        <el-icon :size="20">
          <component :is="isCollapse ? 'Expand' : 'Fold'" />
        </el-icon>
        <span v-if="!isCollapse">收起菜单</span>
      </div>

      <!-- 动态菜单 -->
      <template v-for="parent in menuTree" :key="parent.id">
        <!-- 如果有子菜单（type=0 目录） -->
        <el-sub-menu v-if="parent.children && parent.children.length" :index="parent.path || String(parent.id)">
          <template #title>
            <el-icon>
              <component :is="parent.icon" />
            </el-icon>
            <span>{{ parent.title }}</span>
          </template>

          <!-- 遍历子项 -->
          <template v-for="child in parent.children" :key="child.id">
            <el-sub-menu v-if="child.children?.length" :index="child.path || String(child.id)">
              <template #title>
                <el-icon>
                  <component :is="child.icon" />
                </el-icon>
                <span>{{ child.title }}</span>
              </template>

              <el-menu-item v-for="item in child.children" :key="item.id" :index="item.path || String(item.id)">
                <el-icon>
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item v-else :index="child.path || String(child.id)">
              <el-icon>
                <component :is="child.icon" />
              </el-icon>
              <span>{{ child.title }}</span>
            </el-menu-item>
          </template>
        </el-sub-menu>

        <el-menu-item v-else-if="parent.path" :index="parent.path">
          <el-icon>
            <component :is="parent.icon" />
          </el-icon>
          <span>{{ parent.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { defineEmits } from "vue";
import { useAuthStore } from "@/store";
import { storeToRefs } from "pinia";


const route = useRoute();
const activeMenu = ref("");
const isCollapse = ref(false);

const store = useAuthStore();
const { permissions } = storeToRefs(store);

const menuTree = computed(() => {

  const validPermissions = permissions.value.filter(p =>
    (p.type === 0 || p.type === 1) &&
    p.visible === 1 &&
    p.status === 1 &&
    p.isDel === 0
  );

  const roots = []
  const map = {}
  validPermissions.forEach(item => {
    map[item.id] = { ...item, children: [] }
  })

  validPermissions.forEach(item => {
    if (item.parentId == null) {
      roots.push(map[item.id])
    } else {
      const parentObj = map[item.parentId]
      if (parentObj) {
        parentObj.children.push(map[item.id])
      }
    }
  })
  // ✅ 在这里打印最终结果
  console.log('🚀 动态菜单树:', roots)
  return roots
})



// 自动设置当前激活菜单
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath;
  },
  { immediate: true }
);

// 切换菜单折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
  emit("toggle-collapse", isCollapse.value);
};

const emit = defineEmits(["toggle-collapse"]);
</script>

<style scoped>
.left-menu-container {
  height: 100%;
  background-color: #066981;
}

.el-menu-vertical {
  width: 220px;
  min-height: 100vh;
  border-right: none;
  transition: width 0.3s;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
}

.collapse-btn {
  display: flex;
  align-items: center;
  height: 48px;
  color: #fff;
  cursor: pointer;
  padding: 0 20px;
  transition: all 0.3s;
  margin: 8px 0;
  white-space: nowrap;
}

.collapse-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.collapse-btn span {
  margin-left: 10px;
}

.el-menu-item {
  height: 46px;
  line-height: 46px;
  margin: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.el-menu-item.is-active {
  background-color: #ffd04b !important;
  color: #044b5f !important;
  font-weight: 600;
}

.el-sub-menu__title {
  height: 50px;
  line-height: 50px;
  margin: 4px 8px;
  border-radius: 6px;
}

.el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 折叠状态下样式 */
.el-menu--collapse {
  width: 64px;
}

.el-menu--collapse .el-sub-menu__title span,
.el-menu--collapse .el-menu-item span {
  display: none;
}

.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}

.el-menu--collapse .el-tooltip__trigger {
  justify-content: center;
}
</style>